<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue'
import * as echarts from 'echarts'

// 获取全局属性
const { proxy } = getCurrentInstance()

// 图表实例引用
const studentChartRef = ref(null)
const bookChartRef = ref(null)

// 数据状态
const studentRankData = ref([])
const bookRankData = ref([])

// 初始化学生排行榜图表
const initStudentChart = (data) => {
  const chart = echarts.init(studentChartRef.value)
  const option = {
    title: {
      text: '当月借书学生排行榜',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: data.map(item => item.username),
      inverse: true
    },
    series: [
      {
        name: '借书数量',
        type: 'bar',
        data: data.map(item => item.borrowCount),
        itemStyle: {
          color: '#91cc75'
        }
      }
    ]
  }
  chart.setOption(option)
}

// 初始化图书排行榜图表
const initBookChart = (data) => {
  const chart = echarts.init(bookChartRef.value)
  const option = {
    title: {
      text: '当月图书受欢迎排行榜',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: data.map(item => item.bookName),
      inverse: true
    },
    series: [
      {
        name: '借阅次数',
        type: 'bar',
        data: data.map(item => item.borrowNumber),
        itemStyle: {
          color: '#5470c6'
        }
      }
    ]
  }
  chart.setOption(option)
}

// 获取数据并初始化图表
const initCharts = async () => {
  try {
    // 获取学生排行榜数据
    const studentRes = await proxy.$api.getStudentTop10()
    if (studentRes.code === 1 && studentRes.data) {
      studentRankData.value = studentRes.data
      initStudentChart(studentRes.data)
    }

    // 获取图书排行榜数据
    const bookRes = await proxy.$api.getBookTop10()
    if (bookRes.code === 1 && bookRes.data) {
      bookRankData.value = bookRes.data
      initBookChart(bookRes.data)
    }
  } catch (error) {
    console.error('获取排行榜数据失败：', error)
  }
}

// 组件挂载时初始化
onMounted(() => {
  initCharts()
})
</script>

<template>
  <div class="home-container">
    <div class="welcome-section">
      <div class="glow-decor"></div>
      <h1 class="welcome-title">欢迎使用图书借阅系统</h1>
      <p class="welcome-subtitle">在这里，你可以查看实时的借阅数据统计</p>
    </div>
    
    <div class="stats-container">
      <div class="chart-wrapper">
        <div class="chart-card">
          <div class="card-header">
            <i class="el-icon-user icon-user"></i>
            <span>学生借阅排行</span>
          </div>
          <div class="divider"></div>
          <div ref="studentChartRef" class="chart"></div>
        </div>
      </div>
      
      <div class="chart-wrapper">
        <div class="chart-card">
          <div class="card-header">
            <i class="el-icon-reading icon-book"></i>
            <span>图书热度排行</span>
          </div>
          <div class="divider"></div>
          <div ref="bookChartRef" class="chart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.home-container {
  padding: 20px;
  min-height: 100%;
  background: linear-gradient(120deg, #e4ecfb 0%, #f5f7fa 100%);
  position: relative;
  overflow-x: hidden;
}

.welcome-section {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 0 30px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 18px;
  color: white;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13);
  position: relative;
  overflow: hidden;
}

.glow-decor {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 320px;
  height: 120px;
  background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 80%);
  transform: translateX(-50%) scale(1.2);
  filter: blur(8px);
  pointer-events: none;
  animation: glowMove 6s ease-in-out infinite alternate;
  z-index: 1;
}

@keyframes glowMove {
  0% { left: 40%; opacity: 0.7; }
  100% { left: 60%; opacity: 1; }
}

.welcome-title {
  font-size: 2.7em;
  margin-bottom: 10px;
  font-weight: 700;
  background: linear-gradient(to right, #fff, #e0e0e0 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 2;
  letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(120, 80, 200, 0.08);
}

.welcome-subtitle {
  font-size: 1.25em;
  color: rgba(255, 255, 255, 0.93);
  margin-top: 12px;
  position: relative;
  z-index: 2;
}

.stats-container {
  display: flex;
  gap: 32px;
  margin-top: 24px;
  justify-content: center;
  align-items: stretch;
}

.chart-wrapper {
  flex: 1;
  min-width: 320px;
  animation: slideUp 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
}

.chart-card {
  background: linear-gradient(120deg, #fff 80%, #f3f6fb 100%);
  border-radius: 18px;
  box-shadow: 0 6px 28px rgba(80, 100, 180, 0.10);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1.5px solid #e6eaf3;
}

.chart-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 36px rgba(80, 100, 180, 0.16);
}

.card-header {
  padding: 22px 24px 16px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.22em;
  font-weight: 700;
  color: #333;
  background: linear-gradient(90deg, #f7faff 60%, #e9f0fb 100%);
  position: relative;
  z-index: 2;
}

.icon-user {
  font-size: 1.5em;
  color: #5a8dee;
  filter: drop-shadow(0 2px 6px #e3eaff);
}
.icon-book {
  font-size: 1.5em;
  color: #a66dd4;
  filter: drop-shadow(0 2px 6px #f0e6fa);
}

.divider {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #e0e7ef 0%, #f7faff 100%);
  margin-bottom: 0px;
  opacity: 0.7;
}

.chart {
  height: 400px;
  padding: 24px 18px 18px 18px;
  background: linear-gradient(120deg, #f7faff 80%, #e9f0fb 100%);
  border-radius: 0 0 16px 16px;
  margin-top: 0;
  transition: background 0.3s;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式布局 */
@media screen and (max-width: 1200px) {
  .stats-container {
    flex-direction: column;
    gap: 20px;
  }
  .chart-wrapper {
    width: 100%;
    min-width: unset;
  }
  .chart {
    height: 320px;
    padding: 18px 8px 12px 8px;
  }
}

@media screen and (max-width: 768px) {
  .welcome-title {
    font-size: 1.5em;
  }
  .welcome-subtitle {
    font-size: 0.95em;
  }
  .stats-container {
    gap: 12px;
    margin-top: 10px;
  }
  .chart {
    height: 220px;
    padding: 10px 2px 6px 2px;
  }
  .chart-card {
    border-radius: 12px;
  }
  .card-header {
    padding: 14px 10px 10px 10px;
    font-size: 1em;
  }
}
</style>
